import { getRoleList } from "@/api/role";
import { Role } from "@/typings/api/role";
import { Select, SelectProps } from "antd";
import { FC, useEffect, useState } from "react";

interface RoleSelectProps extends SelectProps {
    value?: string[]
}
const RoleSelect: FC<RoleSelectProps> = ({ value, onChange, ...props }) => {
    const [roleList, setRoleList] = useState<Role[]>([]);
    const fetchRoleList = async () => {
        // prettier-ignore
        const { data: { list } } = await getRoleList({ page: 1, pageSize: 9999 });
        setRoleList(list);
    };
    useEffect(() => {
        fetchRoleList();
    }, []);
    const [innerValue, setInnerValue] = useState<string[]>([]);
    useEffect(() => {
        setInnerValue(value || []);
    }, [value]);
    return (
        <Select
            {...props}
            value={innerValue}
            onChange={(val, option) => {
                setInnerValue(val);
                onChange?.(val, option);
            }}
        >
            {roleList.map(item => (
                <Select.Option key={item._id} value={item._id}>
                    {item.name}
                </Select.Option>
            ))}
        </Select>
    );
};

export default RoleSelect;
